<template>
  <div class="review-container">
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
      <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      >
      <div class="test-type">
              <div class="qr-code">
                  <div>二维码图片</div>
                  <div>手机扫码预览</div>
              </div>
              <h4>java初级</h4>
          </div>
      <div class="scroll-bar">
      <div class="review-header">
          
          <div class="test-document">
            <span>答题时长:40分钟</span>
            <span>共20题 满分100分</span>
            <span>有效期至:
              2017/12/31 23:59:59
            </span>
          </div>
          <div class="documet-note clearfix"><div>试卷说明：</div> <div> 试卷包含单选、多选及主观题，答卷机会只有一次，开始答卷后中途退
                    出视为放弃，交卷前可修改答案，交卷后答案将不可修改。请把握时间，
                    在截止有效期前交卷。</div>
          </div>
      </div>
        <div class="review-body">
          <dl>
            <dt>1、下列说法正确的有（）<span>1101</span></dt>
            <dd>A． class中的constructor不可省略</dd>
            <dd>B． constructor必须与class同名，但方法不能与class同名</dd>
            <dd>C． constructor在一个对象被new时执行</dd>
            <dd>D．一个class只能定义一个constructor</dd>
          </dl>
          <dl>
            <dt>1、下列说法正确的有（）<span>1102</span></dt>
            <dd>A． class中的constructor不可省略</dd>
            <dd>B． constructor必须与class同名，但方法不能与class同名</dd>
            <dd>C． constructor在一个对象被new时执行</dd>
            <dd>D．一个class只能定义一个constructor</dd>
          </dl>
        </div>
        </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
   data() {
      return {
        dialogVisible: false,
        value1: '',
        value2: ''
      };
    },
  methods: {
      
    }
}
</script>
<style scoped>
.clearfix::after {
      content: ".";
      clear: both;
      display: block;
      overflow: hidden;
      height: 0;
        }

  .clearfix {
      zoom: 1;
  }
  .scroll-bar {
    max-height: 400px;
    overflow-y: auto; 
  }
  .test-type {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 20px;
  }
  .test-type h4{
    text-align: center;
    margin: 0;
    font-weight: 400;
  }
  .qr-code {
    position: absolute;
  }
  .qr-code>div{
    display: inline-block;
  }
  .qr-code>div:last-child{
    width: 40px;
    font-size: 12px;
    line-height: 16px;
  }
  .review-container>>>.el-dialog__body{
    padding: 0 20px;
  }
  .test-document {
    margin-bottom: 14px;
  }
  .test-document span{
    margin-right: 20px;
  }
  .test-document span:first-child{
     margin-right: 60px;
  }
  .documet-note{
    display: flex;
    flex: 1;
  }
  .test-document,.documet-note {
    padding-left: 60px;
    padding-right: 40px;
  }
  .documet-note>div:first-child{
    min-width: 70px; 
  }
  .review-body {
    padding: 0 120px;
  }
  .review-body dd{
    margin: 0;
  }
  .review-body dt{
    position: relative;
  }
  .review-body dt span {
    position: absolute;
    right: 0;
  }
</style>

